<template>
  <div class="productadd">
    <h3>商品添加</h3>
    <div class="productadd-tip">
      <span>商品名称</span>
      <div>
        <el-input
          style="width: 400px"
          placeholder="商品名称"
          v-model="proname"
        ></el-input>
      </div>
    </div>
    <div class="productadd-tip">
      <span>商品分类</span>
      <div>
        <el-select v-model="select" placeholder="请选择商品分类">
          <el-option
            v-for="item in options"
            :key="item.cateName"
            :label="item.cateName"
            :value="item.cateName"
          >
          </el-option>
        </el-select>
      </div>
    </div>
    <div class="productadd-tip">
      <span>商品价格</span>
      <div>
        <el-input-number v-model="num" :min="0"></el-input-number>
      </div>
    </div>
    <div class="productadd-tip">
      <span>商品图片</span>
      <span id="headimg">
        <el-upload
          class="avatar-uploader"
          action="http://127.0.0.1:5000/goods/goods_img_upload"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
        >
          <img v-if="imageUrl" :src="imageUrl" class="avatar" />
          <i
            v-else
            class="el-icon-plus avatar-uploader-icon"
            style="
              border: 1px dashed #d9d9d9;
              border-radius: 6px;
              background-color: #fff;
            "
          ></i>
        </el-upload>
      </span>
    </div>
    <div class="productadd-tip">
      <span>商品描述</span>
      <div>
        <el-input
          type="textarea"
          :rows="2"
          placeholder="请输入商品描述"
          v-model="textarea"
          style="width: 400px"
          maxlength="50"
          show-word-limit
        >
        </el-input>
      </div>
    </div>
    <div class="productadd-tip">
      <span></span>
      <div>
        <!--  @click="clickadd" -->
        <el-button :disabled="shownow" type="primary" @click="clickadd"
          >添加商品</el-button
        >
      </div>
    </div>
  </div>
</template>

<script>
// 引入添加商品ajax接口
import { categories, addproduct } from "@/apis/items";
export default {
  data() {
    return {
      // 禁用按钮
      shownow: false,
      // 商品名称
      proname: "",
      // 商品分类
      select: "",
      // 商品价格
      num: "",
      // 本地渲染商品图片
      imageUrl: "",
      // 商品描述
      textarea: "",
      options: [],
    };
  },
  methods: {
    // 传送照片成功后
    handleAvatarSuccess(res, file) {
      // 本地渲染图片
      this.imageUrl = URL.createObjectURL(file.raw);
      // 将服务器图片挂载到this上面(必须是服务器图片,本地和服务器是分开的)
      this.newimg = res.imgUrl;
      // console.log(res, file);
    },
    clickadd() {
      // 禁用按钮
      this.shownow = true;
      // 放开禁用按钮
      setTimeout(() => {
        this.shownow = false;
      }, 1000);
      // console.log(111);
      // 点击添加调用ajax传参
      addproduct({
        name: this.proname,
        category: this.select,
        price: this.num,
        imgUrl: this.newimg,
        goodsDesc: this.textarea,
      }).then((res) => {
        // console.log(res);
        // 判定如果没有填东西的话
        if (
          this.proname == "" ||
          this.select == "" ||
          this.num == "" ||
          this.textarea == ""
        ) {
          this.$message({
            message: "请填写商品信息并上传商品图片",
            type: "warning",
          });
        } else {
          // 如果成功后
          if (res.data.code == 0) {
            this.$message({
              message: "恭喜你，商品添加成功",
              type: "success",
            });
            // 成功后将各列表清空
            this.proname = "";
            this.select = "";
            this.num = "";
            this.imageUrl = "";
            this.textarea = "";
          }
        }
      });
    },
  },
  created() {
    // 页面数据加载完毕后发送ajax请求
    categories().then((res) => {
      // console.log(res.data.categories);
      this.options = res.data.categories;
    });
  },
};
</script>

<style lang="less" scoped>
.productadd {
  margin: 20px;
  background-color: #fff;
  box-sizing: border-box;
  padding: 0 20px 20px 20px;
  display: flex;
  flex-direction: column;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  .productadd-tip {
    display: flex;
    margin: 10px 0 10px 0;
    line-height: 40px;
    span {
      width: 80px;
      text-align: right;
      margin-right: 20px;
    }
  }
  h3 {
    line-height: 60px;
    border-bottom: 1px solid #ccc;
    margin-bottom: 10px;
  }
  #headimg {
    .avatar-uploader .el-upload {
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
      border-color: #409eff;
    }
    .avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 178px;
      height: 178px;
      line-height: 178px;
      text-align: center;
    }
    .avatar {
      width: 178px;
      height: 178px;
      display: block;
    }
  }
}
</style>